<template>
  <div v-if="activeFilePath">
    <!-- md 预览 -->
    <div v-if="onlyPreview && ['md'].includes(fileType)" class="md-preview" :style="{ height: editorHeight }">
      <v-md-preview :text="text"></v-md-preview>
    </div>
    <!-- md 编辑器 -->
    <div :style="{ height: editorHeight }" v-else>
      <v-md-editor @copy-code-success="handleCopyCodeSuccess" :preview-options="{ preview: false }" @change="changeFn"
        @save="saveFn" :include-level="[1, 2, 3, 4, 5, 6]" :toc-nav-position-right="true" left-toolbar=""
        :height="editorHeight" v-model="text"></v-md-editor>
    </div>
  </div>
  <div class="editor-choose" v-else>请选择文件</div>
</template>

<script setup lang="ts">
import { ref, reactive, watch, onBeforeUnmount, onMounted } from 'vue';
import useFileStore from '@/store/file';
import { storeToRefs } from 'pinia';
const fileStore = useFileStore();
const { onlyPreview, fileType, dirPath, activeFilePath } = storeToRefs(fileStore);
const { fileSend, fileOn, clipboard } = window.electronApi;
// 值
const text = ref('');

// 复制
const handleCopyCodeSuccess = (code: string) => {
  clipboard(code)
}

// 赋值
const getText = (filepath: string) => {
  fileSend({ type: 'getFile', data: filepath });
}
// 监听通信
fileOn(function (event: any, message: any) {
  const { type, data } = message;
  switch (type) {
    case 'getFile':
      const { code, value } = data;
      text.value = code === 200 ? value : '';
      break;
    case 'fileChange':
      console.log('fileChange' + data);
      break;
    default:
      return false;
  }
})

// 保存
let saveTimer: NodeJS.Timeout | null = null;
const writeFile = (filepath: string, data: string, status: boolean = false) => {
  if (saveTimer || (status && saveTimer)) clearTimeout(saveTimer);
  if (status) {
    fileSend({ type: 'setFile', data: { filepath, value: data } });
  } else {
    saveTimer = setTimeout(() => {
      fileSend({ type: 'setFile', data: { filepath, value: data } });
    }, 3000);
  }
}
const saveFn = (text: string, html: string) => {
  writeFile(fileStore.activeFilePath, text, true)
}
const changeFn = (text: string, html: string) => {
  writeFile(fileStore.activeFilePath, text)
}
// 文件路径变化
watch(() => fileStore.activeFilePath, (newVal, oldVal) => {
  if (newVal) {
    if (newVal !== oldVal) {
      oldVal && writeFile(oldVal, text.value, true);
      getText(newVal);
    }
  }
}, {
  immediate: true
})

const editorHeight = ref('200px');
// 设置编辑高度
const setEditorHeightFn = () => {
  editorHeight.value = `${window.innerHeight - 80 || '200'}px`;
}
onMounted(() => {
  window.addEventListener('resize', setEditorHeightFn);
  setEditorHeightFn();
})

onBeforeUnmount(() => {
  writeFile(fileStore.activeFilePath, text.value, true)
  window.removeEventListener('resize', setEditorHeightFn)
})
</script>

<style lang="scss" >
.v-md-editor {
  /* 自定义编辑容器样式 */
  background-color: #002b36;
  border-radius: 0;

  .v-md-editor__toolbar {
    /* 自定义头部 */
    background-color: #002b36;
    border-bottom: 0;
    border-bottom: 1px solid #000;

    .v-md-editor__toolbar-right {

      // background-color: #19f9b8;
      .v-md-editor__toolbar-item--active {
        background-color: #07a1b2;

      }

      li {
        // background-color: #07a1b2;
        color: #19f9b8;

        &:hover {
          background-color: #07a1b2;
        }
      }
    }
  }

  .v-md-editor__main {
    background-color: #002b36;

    .v-md-editor__editor-wrapper {

      border-right: 1px solid #444;

      .v-md-textarea-editor {
        textarea {
          background-color: #002b36;
          color: #07a1b2;
        }
      }
    }

    .v-md-editor__preview-wrapper {

      //  预览
      .vuepress-markdown-body {
        background-color: #002b36;
        color: #07a1b2;
      }
    }
  }


  .v-md-editor__left-area {
    background-color: #002b36;
    color: #07a1b2;
    border-left: 1px solid #555 !important;

    .v-md-editor__left-area-title {
      color: #fff;

      &::after {
        border-bottom: 1px solid #555 !important;
      }
    }

    .v-md-editor__toc-nav-item {
      color: #19f9b8;
    }
  }
}
</style>
<style lang="scss" scoped>
.md-preview {
  box-sizing: border-box;
  overflow-x: hidden;
  background-color: #fff;
}

.editor-choose {
  padding: 20px;
  color: #07a1b2;
  font-size: 14px;
}
</style>